<template>
  <div class="bigbox">
    <div class="box">
      账号:
      <el-input v-model="user.adminname" placeholder="请输入账号" />
      密码:<el-input v-model="user.password" type="password" placeholder="请输入密码" show-password />
      <el-button type="success" @click="loginfn">提交</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import type { IOper } from "@/MyTs";
import { loginApi } from "@/api/Login";
import { ElMessage } from "element-plus";
import { getCurrRouter } from "@/grants/router"; //路由函数
const $router = useRouter();
//定义对象内存放登录名及密码
const user = reactive<IOper>({
  adminname: "",
  password: "",
});

function loginfn() {
  loginApi(user).then((res) => {
    if (res.data.code == 200) {
      ElMessage({
        message: "登录成功",
        type: "success",
      });
      //保存用户信息
      sessionStorage.setItem("adminname", res.data.data.adminname);
      //保存token
      sessionStorage.setItem("token", res.data.data.token);
      sessionStorage.setItem("checkedkeys", JSON.stringify(res.data.data.checkedkeys));
      getCurrRouter();
      $router.push("/Admin");
    }
  });
}


</script>

<style lang="scss" scoped>
.box {
  width: 400px;
  height: 300px;
  margin: auto;
  padding: 10px;
  background-color: bisque;

}

.bigbox {
  background-image: url("https://ts1.cn.mm.bing.net/th?id=OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2");
  width: 100%;
  height: 100%;
  background-size: cover;
  display: flex;

}

.el-button {
  width: 180px;
  margin-top: 50px;
  margin-left: 100px;
}
</style>
